<template>
  <div class="count-bar">
    <div class="item count_1">
      <div class="title">应用总数</div>
      <div class="value"><b>{{ data.appNum }}</b></div>

    </div>
    <div class="item count_2">
      <div class="title">提供服务最多的应用</div>
      <div :title="data.supplyMaxServiceAppName" class="value"><b>{{ data.supplyMaxServiceAppName }}</b><span>（提供{{ data.supplyMaxServiceAppNum }}个）</span>
      </div>

    </div>
    <div class="item count_3">
      <div class="title">提供事件最多的平台</div>
      <div class="value" :title="data.supplyMaxEvtAppName"><b>{{ data.supplyMaxEvtAppName }}</b><span>（提供{{ data.supplyMaxEvtAppNum }}个）</span></div>

    </div>

  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { getAppCount } from '@/api/statistics'


export default {
  name: 'CountBar',
  props: {
    time: {
      type: Object,
      default: () => { }
    },
    code: { // 地区code
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    }
  },
  setup(props) {
    const data = ref({
      appNum: null,
      supplyMaxEvtAppName: null,
      supplyMaxEvtAppNum: null,
      supplyMaxServiceAppName: null,
      supplyMaxServiceAppNum: null
    })
    const getData = async () => {
      const { endDate, startDate } = props.time
      const para = {
        areaCode: props.code,
        endDate,
        startDate
      }
      const res = await getAppCount(para)
      if (res.status == 200) {
        data.value = res.data
      } else {
        data.value = Object.keys(data.value).forEach(key => (data.value[key] = null))
      }
    }
    watch(() => props.refresh, () => {
      getData()
    });
    watch(() => props.code, () => {
			getData()
		});
    return {
      data
    }
  }
}
</script>

<style lang="scss" scoped>
.count-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .item {
    margin: 7.5px;
    padding-left: 105px;
    padding-top: 9px;
    width: 35%;
    height: 100%;
    background-size: 95px 131px;
    background-position: 0 center;
    background-repeat: no-repeat;

    &:nth-child(1) {
      width: 30%;
    }

    .value {
      height: 40px;

      line-height: 40px;

      b {
        display: inline-block;
        // max-width: calc(100% - 80px);
        font-size: 1.25vw;
        font-family: 优设标题黑;
        font-style: italic;
        // font-weight: 600;
        color: #FFFFFF;
        letter-spacing: 1px;
        background: linear-gradient(180deg,
            rgba(34, 103, 255, 1) 0,
            rgba(170, 237, 255, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
      }

      span {
        font-size: 12px;
        color: #aaa;


      }
    }

    .title {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.7);
      line-height: 17px;
    }
  }

  .count_1 {
    width: 8%;
    background-image: url(@/assets/screendeck/data-group-1.png);
  }

  .count_2 {
    width: 46%;
    background-image: url(@/assets/screendeck/data-group-2.png);
  }

  .count_3 {
    width: 46%;
    background-image: url(@/assets/screendeck/data-group-3.png);
  }
}
</style>